<style scoped>
 .ivu-table td.demo-table-info-column{
        background-color: #2db7f5;
        color: #fff;
    }
</style>
<template>
  <div>
<Card style="margin-bottom: 10px">
      <Form inline class="form-search">
        <FormItem>
          <DatePicker
           style="width:150px"
            type="date"
            format="yyyy年MM月dd日"
            placeholder="开始日期"
            :clearable="false"
            v-model="sdate"
          ></DatePicker>
        </FormItem>
        <FormItem>
          <DatePicker
          style="width:150px"
            type="date"
            format="yyyy年MM月dd日"
            placeholder="结束日期"
            :clearable="false"
            v-model="edate"
          ></DatePicker>
        </FormItem>
        <FormItem> </FormItem>

        <FormItem>
          <Button
            type="primary"
            @click="
              page = 1;
              SearchSupplierPayLog();
            "
            icon="md-search"
            >查询</Button
          >
        </FormItem>

      </Form>
    </Card>
    <Table
      ref="table"
      style="margin-bottom: 10px"
      border
      :loading="loadingTable"
      :columns="tableTitle"
      :data="tableData"
      :height="tableHeight"
    ></Table>
    <Page
      :total="total"
      :current="page"
      :page-size="size"
      :page-size-opts="[10, 50, 100, 300, 500, 1000, 2000, 5000]"
      @on-change="
        (s) => {
          page = s;
          SearchSupplierPayLog();
        }
      "
      @on-page-size-change="
        (p) => {
          size = p;
          page = 1;
          SearchSupplierPayLog();
        }
      "
      show-total
      show-sizer
    />

  </div>
</template>

<script>
import { SearchSupplierPayLog } from '@/api/supplier'
export default {
  name: 'supplierpaylog',
  props: {
    Id: {
      type: String | Number,
      default: ''
    }
  },
  data () {
    return {
      sdate: '',
      edate: '',
      total: 0,
      page: 1,
      size: 50,
      tableHeight: 400,
      status: -1,
      keyword: '',
      loadingTable: false,
      Extras: {},
      tableTitle: [
        {
          type: 'index',
          title: '序号',
          align: 'center',
          width: 60,
          render: (h, params) => {
            return h('span', params.index + (this.page - 1) * this.size + 1)
          }
        },
        {
          key: 'OrderDate',
          title: '付款日期',
          width: 160,
          align: 'center',
          render: (h, params) => {
            return h('span', this.dayjs(params.row.OrderDate).format('YYYY年MM月DD日'))
          }
        },
        {
          key: 'OldAmount',
          title: '原账目(元)',
          width: 120,
          align: 'center'
        },
        {
          key: 'ChangeAmount',
          title: '付款金额(元)',
          width: 120,
          align: 'center'
        },
        {
          key: 'DiscountAmount',
          title: '优惠金额(元)',
          width: 120,
          align: 'center'
        },
        {
          key: 'NewAmount',
          title: '付款后账目(元)',
          width: 120,
          align: 'center'
        },

        {
          key: 'Remark',
          title: '备注',
          minWidth: 400,
          align: 'center'
        }

      ],
      tableData: []
    }
  },
  computed: {},

  methods: {

    SearchSupplierPayLog () {
      let vm = this
      vm.loadingTable = true

      if (typeof vm.sdate === 'object') {
        vm.sdate = vm.dayjs(vm.sdate).format('YYYY年MM月DD日')
      }
      if (typeof vm.edate === 'object') {
        vm.edate = vm.dayjs(vm.edate).format('YYYY年MM月DD日')
      }

      var reqData = {
        sdate: vm.sdate,
        edate: vm.edate,
        supplierid: vm.Id,
        page: vm.page,
        size: vm.size
      }
      SearchSupplierPayLog(reqData).then((res) => {
        vm.loadingTable = false
        var data = res.data
        if (data.StatusCode == 200) {
          vm.tableData = data.Data.Items
          vm.total = data.Data.TotalCount
        } else {
          vm.$Notice.error({
            title: data.Errors
          })
        }
      })
    }
  },
  mounted () {
    this.sdate = this.dayjs().subtract(1, 'month').date(1).format('YYYY年MM月DD日')
    this.edate = this.dayjs().format('YYYY年MM月DD日')
    this.SearchSupplierPayLog()
  }
}
</script>

<style>
</style>
